<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>我的等级</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="__STATIC_URL__/static/mobile/css/weui.css"/>
    <link rel="stylesheet" href="__STATIC_URL__/static/mobile/css/setlevel.css"/>
    <link rel="stylesheet" href="/static/mobile/css/stylelevel.css"/>
    <script>
        var imgurl="__STATIC_URL__"
    </script>
    <style>
        .nav{
            width:100%;
            height:66px;
            display:flex;
            flex-direction:row;
            background-color:#fff;
        }
        .default{
            text-align:center;
            flex:1;
            margin:10px 10px;

        }
        .red .ictext{
            color:#99D7F6
        }
        .red .row{
            text-align:center;
            flex:1;
            border-bottom:2px solid #C0E6F9;
            margin: 12px 10px;

        }
        .show{
            display:block;
            text-align:center;

        }
        .hidden{
            display:none;
            text-align:center;

        }
        .icon{
            width:19px;
            height:19px;
            margin-top:2px;

        }
        .ictext{
            color:#9B9B9B;
            font-size: 12px;
            height: 15px;
            line-height: 15px;

        }
        .hycz{
            width:16px;
            display:inline-block;
        }
        .hytitle{
            font-size:14px;
            color:#F29F7D;
            display:inline-block;
        }
        .weui-cell:before {

            border-top: none;

        }
        .hytext{
            margin-left:21px;
            font-size:13px;
            color: #5f5f5f;
        }
        .weui-btn:after{
            border:none;
        }
        button.hybtn{
            border-radius:15px;
            font-size:13px;
            line-height: 23px;
            color: #F29F7D;
            border: 1px solid #F29F7D;
            background:#fff;
        }
        .tqhy{
            font-size: 14px;
            color:#7ECDF4;
            text-align:center;
        }
        .tqhy p{
            display:inline-block;
        }
        .tqhy span{
            margin-top:-20px;
            display:inline-block;
            height:1px;
            width:25px;
            background:#7ECDF4;
        }
        .weui-cells:after{
            border:none;
        }
        .weui-panel:before{
            border:none;
        }
        .weui-panel:after{
            border:none;
        }
        .cent{
            text-align:center;
            font-size:13px;
            color: #565656;
        }
        .ml30{
            margin-left:30px;
        }
        .wrapList{
            padding:0;
        }
    </style>
</head>

<body>
<div class="container" id="container">
    <div class="page panel js_show">
        <div class="weui-panel weui-panel_access">
            <div class="weui-panel__hd" style="overflow: hidden;background-color:#7ECDF4;padding: 30px 30px 0 30px;text-align: center;">
                <div style="    background: linear-gradient(to right, #FF88A4, #FEC053); border-radius:5px;">
                    <p style="padding: 10px 30px;color: #FFFFFF;text-align:left;">我的等级</p>
                    <div  class="">
                        <div class="waic progress"></div>

                    </div>
                    <p style="padding: 10px 30px;color: #FFFFFF;font-size:11px;font-style:oblique">
                        <span style="font-size:10px;">成长值：</span><span id="hasPay"></span>
                        <span style="font-size:10px;">  /  积分：</span><span>{$info.bonus}</span>

                    </p>
                </div>

            </div>
        </div>
        <!--等级说明 开始-->
        <div class="weui-panel weui-panel_access" style="margin-top: 0;">
            <div class="nav bc_white">
                <div class="default" id="selected" data-id="selected">
                    <a href="">
                        <img src="__STATIC_URL__/static/images/icon1.png"class="icon"style="height:19px;padding-top:3px;"/>
                        <div class="ictext">商家折扣</div>
                    </a>
                    <div class="row"></div>
                </div>
                <div class="default " id="selected1" data-id="selected1">
                    <img src="__STATIC_URL__/static/images/icon2.png"class="icon"/>
                    <div class="ictext ">权益优惠券</div>
                    <div class="row"></div>
                </div>
                <div class="default red" id="selected2" data-id="selected2" >
                    <a href="">
                        <img src="__STATIC_URL__/static/images/icon3.png"class="icon"/>
                        <div class="ictext">会员权益</div>
                    </a>
                    <div class="row"></div>
                </div>
                <div class="default" id="selected2" data-id="selected2" >
                    <a href="">
                        <img src="__STATIC_URL__/static/images/icon4.png"class="icon"/>
                        <div class="ictext">每日任务</div>
                    </a>
                    <div class="row"></div>
                </div>
            </div>

        </div>
        <hr style="margin:0px;height:4px;border:0px;color:#D5D5D5;"/>
        <div class="weui-panel weui-panel_access" style="margin-top: 0;">
            <div class="weui-cells" style="margin-top: 0;">
                <div class="weui-cell" style="padding-bottom:5px;">
                    <div class="weui-cell__hd">
                        <img src="__STATIC_URL__/static/images/hyicon.png" alt="" class="hycz">
                        <p class="hytitle">当前等级：{$info.rank_name}</p>
                    </div>
                </div>
                <div class="weui-cell" style="padding-top:0px;">
                    <div class="weui-cell__hd">

                        <p class="hytext">会员特权：，会员等级{$info.rank_name}</p>
                    </div>

                    <!--<div class="weui-cell__ft">-->
                        <!--<button class="weui-btn hybtn">会员政策</button>-->
                    <!--</div>-->
                </div>
            </div>
        </div>
        <div class="weui-panel weui-panel_access" style="margin-top: 0;">
            <div class="weui-cells" style="margin-top: 0;">
                <div class="weui-cell" style="padding-bottom:5px;">
                    <div class="weui-cell__hd">
                        <img src="__STATIC_URL__/static/images/vipicon.png" alt="" class="hycz">
                        <p class="hytitle">等级特权</p>
                    </div>
                </div>
                        <div class="weui-cell">
                            <div class="weui-cell__bd">
                                <p style="text-align:center;" class="cent">会员等级</p>
                            </div>
                            <div class="weui-cell__bd">
                                <p class="cent">成长值</p>
                            </div>
                            <div class="weui-cell__bd">
                                <p class="cent">折扣</p>
                            </div>
                        </div>
            </div>
        </div>
        <!--等级说明 结束-->
        <div class="weui-panel weui-panel_access" style="margin-top: 0;margin-bottom:100px;">
            <div class="borderTop weui-cells" style="margin-top: 0;">

                {volist name="level" id="vo"}
                <div class="wrap">
                    <div class="weui-cell tqhylist">
                        <div class="weui-cell__bd {$vo.id} tqhy ">
                            <div>{$vo.live_title}</div>
                        </div>
                        <div class="weui-cell__bd">
                            <p class="cent">{$vo.bonus}</p>
                        </div>
                        <div class="weui-cell__bd">
                            <p class="cent">折扣</p>
                        </div>
                    </div>
                    <div class="wrapList">

                        <div class="weui-cell">
                            <div class="weui-cell__hd ml30">
                                {$vo.welfare}

                            </div>

                            {switch name=":rankRewardStatu(['gid'=>$info['id'],'lid'=>$vo['id']])"}
                            {case value="9"}<div class="weui-cell__ft blq">无奖励</div>{/case}
                            {case value="8"}<div class="weui-cell__ft blq">未达到</div>{/case}
                            {case value="7"}<div class="weui-cell__ft blq">已领取</div>{/case}
                            {case value="6"}<div class="weui-cell__ft czlq" data-lid="{$vo.id}" data-gid="{$info.id}">领取</div>{/case}
                            {default /}敬请期待
                            {/switch}
                        </div>

                    </div>
                </div>
                {/volist}

            </div>
        </div>



    </div>
</div>

<!--确认框-->
<div class="js_dialog" id="androidDialog1" style="display: none;">
    <div class="weui-mask"></div>
    <div class="weui-dialog weui-skin_android">
        <div class="weui-dialog__hd"><strong class="weui-dialog__title">提示</strong></div>
        <div class="weui-dialog__bd">确认领取该奖励吗？</div>
        <div class="weui-dialog__ft">
            <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_default">取消</a>
            <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary">确认</a>
        </div>
    </div>
</div>
<!--toast-->
<div id="toast" style="display: none;">
    <div class="weui-mask_transparent"></div>
    <div class="weui-toast">
        <i class="weui-icon-success-no-circle weui-icon_toast"></i>
        <p class="weui-toast__content" id="lqts">已领取</p>
    </div>
</div>
</body>
<script src="__STATIC_URL__/static/js/jquery-2.1.4.min.js"></script>
<script src="/static/js/jquery-progress.js"></script>
<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script type="text/javascript">
    $(function() {
        var lid = "";
        var gid = "";
        var $androidDialog1 = $('#androidDialog1');
        $('.weui-cells').on('click', '.tqhylist', function() {
            $(".wrapList").slideUp();
            if($(this).siblings('.wrapList').css('display') == "none"&&$(this).siblings('.wrapList').html()!="") {
                $(this).siblings('.wrapList').slideDown();
            } else {
                $(this).siblings('.wrapList').slideUp();
            }

        });
        $(".weui-dialog__btn_default").click(function(){
            $androidDialog1.fadeOut(200);
        });
        $(".czlq").click(function(e) {
            e.stopPropagation();
            lid = $(this).attr("data-lid");
            gid = $(this).attr("data-gid");
            $androidDialog1.fadeIn(200);
        });
        $(".weui-dialog__btn_primary").click(function() {
            $(".weui-dialog__btn_primary").prop("onclick",null).off("click");

            $.ajax({
                type: "post",
                url: "{:url('carduser/getRankReward')}",
                async: true,
                data: {
                    lid:lid,
                    gid:gid
                },
                success: function(data) {
                    if(data.code==0){
                        $("#lqts").text(data.message);
                        var $toast = $('#toast');
                        if($toast.css('display') != 'none') return;
                        $toast.fadeIn(100);
                        setTimeout(function() {
                            window.location.reload()
                        }, 1000);
                    }else{
                        $("#lqts").text(data.message);
                        var $toast = $('#toast');
                        if($toast.css('display') != 'none') return;
                        $toast.fadeIn(100);
                        setTimeout(function() {
                            $toast.fadeOut(100);
                        }, 2000);
                    }

                }
            });
        })
    })

</script>

<script type="text/javascript">
    $(function(){

    });
$(function(){
var growup="{$info['growup']}";
var card_id="{$info['card_id']}";
    $.ajax({
        type: "POST",
        url: "{:url('')}",
        dataType: "json",
        data: {
            growup:growup,
            card_id:card_id
        },
        success: function (data) {
            console.log(data);
            if (data.code == 0) {
                 res=data.data;

                // alert(widt);
                $(".xianpa").css({"padding-left":widt,"padding-right":widt});
                $(".yixif").css({"padding-left":widt,"padding-right":widt});
                $(".progress").startProgress({
                    "nodes":res,
                    "hasPay":data.hasPay
                });
                $("#hasPay").html(data.hasPay);
                var geshu = $(".djwai").children(".dengji").length;
                console.log(geshu)
                var wid = $(".djwai").width()/geshu/2;
                // alert(wid);
                var widt = wid + "px";
                $(".xianpa").css({"padding-left":widt,"padding-right":widt});
                $(".yixif").css({"padding-left":widt,"padding-right":widt});
                console.log(widt);
            } else {
            }
        }

    })
})

</script>

</html>